<template>
  <div class="data-course">
    <div class="data-course-filter">
      <span style="margin-bottom:20px;">创建时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="|"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleFilter"
      />
      <div style="margin-top:20px;">
        <span>关键词</span>
        <el-select v-model="indentity" clearable style="width:165px;" @change="handleFilter">
          <el-option
            v-for="item in indentitys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="content" style="width:200px" placeholder="请输入关键词搜索" @keyup.enter.native="handleFilter"/>
        <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
        <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
      </div>
    </div>
    <el-divider content-position="left">共{{ total }}条数据</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderTitle" label="订单名称" min-width="10" align="center"/>
      <el-table-column prop="userName" label="购买者" min-width="10" align="center"/>
      <el-table-column prop="orderCreateTime" label="创建时间" min-width="10" align="center"/>
      <el-table-column prop="orderPrice" label="订单价格" min-width="10" align="center"/>
      <el-table-column prop="orderStatus" label="订单状态" min-width="10" align="center"/>
      <el-table-column prop="distributorName" label="代理商名称" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="accountDetail(scope.row)">{{ scope.row.distributorName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="rate" label="分成比例" min-width="10" align="center"/>
      <el-table-column prop="price" label="分成金额" min-width="10" align="center">
        <template slot="header" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="订单状态非交易成功时不显示分成比例、分成金额且不参与分成；分成金额小于最小计价金额0.01元时，不显示分成金额且不参与分成。" placement="top">
            <span>分成金额<i class="el-icon-question"/></span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!--<account-dialog :data="accountDialog" @closed="accountDialog.dialog = false"/>-->
  </div>
</template>

<script>
import AccountDialog from './components/data/userDialog'
import Pagination from '@/components/Pagination'
import { getDataCourse } from '@/api/distribution/agencydata'
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    AccountDialog,
    Pagination
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      downloadLoading: false,
      content: '',
      indentity: '',
      date: [],
      indentitys: [
        {
          label: '购买者',
          value: 'username'
        },
        {
          label: '代理商名称',
          value: 'distributorName'
        },
        {
          label: '订单名称',
          value: 'orderTitle'
        }
      ],
      accountDialog: {
        dialog: false,
        tableData: null
      },
      tableData: [],
      filterData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getDataCourse(getTenantId()).then(res => {
        this.tableData = res.data.items
        this.filterData = res.data.items
        this.total = res.data.items.length
      })
    },
    accountDetail(val) {
      this.accountDialog.dialog = true
      this.accountDialog.tableData = val
    },
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.date && (new Date(item.createTime) < this.date[0] || new Date(item.createTime) > this.date[1])) return false
        if (this.indentity === 'username' && item.userName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'distributorName' && item.distributorName.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'orderTitle' && item.orderTitle.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.date = []
      this.indentity = ''
      this.content = ''
      this.getData()
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['订单名称', '购买者', '创建时间', '订单价格', '订单状态', '代理商名称', '分成比例', '分成金额']
        const filterVal = ['orderTitle', 'userName', 'orderCreateTime', 'orderPrice', 'orderStatus', 'distributorName', 'rate', 'price']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'courseDataList',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.data-course {
  padding:20px;
  &-filter,
  &-keyword {
    width: 100%;
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin: 10px 0;
    }
    .keyword {
      display: inline-block;
      width: 56px;
      text-align: right;
    }
  }
}
</style>
